<template>
  <div class="filter">
    <t-dialog
      width="1166px"
      :footer="false"
      placement="center"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <!--<p class="chevron-left">-->
          <!--  <icon-font name="chevron-left" size="18px"/>-->
          <!--</p>-->
          <h3>{{ header }}</h3>
        </div>
      </template>
      <template #footer>
        <!--<div class="footer-btns">-->
        <!--  <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="confirm-btn flex-1" @click="handleConfirm">{{confirmBtn.text}}</t-button>-->
        <!--  <t-button theme="default" class="cancel-btn" @click="close">取消</t-button>-->
        <!--</div>-->
      </template>
      <div>
        <div class="base-info">
          <div class="flex align-center">
            <p class="label-title">仓库名称</p>
            <p>{{ info.warehouse_name }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">产品名称</p>
            <p>{{ info.product_title }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">产品图</p>
            <p>
              <t-image-viewer :images="[info.product_thumb]" :closeOnEscKeydown="false">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                    <p class="prod-img">
                      <img alt="test" :src="info.product_thumb"/>
                    </p>
                    <div class="tdesign-demo-image-viewer__ui-image--hover">
                      <span><browse-icon size="1.4em"/> </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </p>
          </div>
          <div class="flex align-center">
            <p class="label-title">产品状态</p>
            <p>
              <t-tag theme="success" variant="light" shape="round" v-if="info.product_status === 1">上架</t-tag>
              <t-tag theme="warning" variant="light" shape="round" v-if="info.product_status === 0">下架</t-tag>
              <t-tag theme="danger" variant="light" shape="round" v-if="info.product_status === -1">作废</t-tag>
            </p>
          </div>
          <div class="flex align-center">
            <p class="label-title">产品单位</p>
            <p>{{ info.unit_title }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">排序</p>
            <p>{{ info.sort }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">订单时间</p>
            <p>{{ info.order_date ? info.order_date : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">含税单价</p>
            <p>{{ info.unit_price ? info.unit_price : '￥0.00' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">创建人</p>
            <p>{{ info.creation_admin ? info.creation_admin : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">创建时间</p>
            <p>{{ info.creation_time ? info.creation_time : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">更新人</p>
            <p>{{ info.update_admin ? info.update_admin : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">更新时间</p>
            <p>{{ info.update_time ? info.update_time : '无' }}</p>
          </div>
          <div class="flex align-center">
            <p class="label-title">备注</p>
            <p>{{ info.remark ? info.remark : '无' }}</p>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script lang="jsx">
import UploadImg from "@/components/upload-img/index.vue";
import { IconFont, BrowseIcon } from "tdesign-icons-vue";
import MapContainer from "@/components/MapContainer/index.vue";
import {warehouse_product_stockDetailApi} from "@/api/warehouseInventory";

export default {
  name: 'OrderInfo',
  components: {UploadImg, IconFont, BrowseIcon, MapContainer},
  data() {
    return {
      visible: false,
      header: '详情',
      info: {},
      editId: '',
      orderType: {
        0: '入库',
        1: '出库',
        2: '调拨',
        3: '盘点'
      },
    }
  },
  methods: {
    getDetail() {
      warehouse_product_stockDetailApi(this.editId).then(res=> {
        this.info = res.data
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(id) {
      this.editId = id
      this.info = {}
      this.getDetail()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.base-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  p {
    padding: 12px 0;
    display: flex;
    color: var(--td-text-color-primary);
  }

  .label-title {
    width: 200px;
    font: var(--td-font-body-medium);
    color: var(--td-text-color-secondary);
    font-weight: 400;
    text-align: left;
    flex-shrink: 0;
  }
}

.footer-btns {
  display: flex;

  .confirm-btn {
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

  .cancel-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    background-color: #B8B8B8;
  }
}
</style>
